﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.7/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="lib/icheck/icheck.css" />

	<link rel="stylesheet" type="text/css" href="skin/default/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js" ></script>
	<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
	<style type="text/css">
		body,#l-map {width: 100%;height: 100%;overflow: hidden;margin:0;}
	</style>

	<!-- 百度地图秘钥 -->
	<script src="http://api.map.baidu.com/api?v=2.0&ak=0EqkFfOceuwLZnVvG6dIocEiqos83G34" type="text/javascript"></script>
	<!--<script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=0EqkFfOceuwLZnVvG6dIocEiqos83G34
&v=1.0"></script>-->

	<title>显示地图</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 被监护人管理 <span class="c-gray en">&gt;</span> 电子围栏管理 <span class="c-gray en">&gt;</span>添加围栏<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>

<div class="page-container" id="time">
    <td class="text-r">围栏名称：</td>
    <input type="text" class="input-text" style="width:150px" placeholder="围栏名称" id="fence_name" name="">
    <td class="text-r">围栏半径：</td>
    <input type="text" class="input-text" style="width:100px" placeholder="围栏半径" id="fence_r" name="">
    <td class="text-r">米</td>
    <button type="submit" class="btn btn-success radius" onclick="fence_add(this,'0000')" id="" name=""><i class="Hui-iconfont">&#xe600;</i> 确定添加</button>
    <td class="text-r">经度：</td>
    <input type="text" class="input-text" style="width:150px" placeholder="经度" id="fence_coor_lng" name="" value="">
    <td class="text-r">纬度：</td>
    <input type="text" class="input-text" style="width:150px" placeholder="纬度" id="fence_coor_lat" name="" value="">
    <button type="submit" class="btn btn-success radius" onclick="position()" id="" name=""><i class="Hui-iconfont">&#xe678;</i>定位</button>

	<!--<p class="f-20 text-success">欢迎使用LBS移动导航 <span class="f-14">V_1.0</span>试用版~~</p>-->
	<!--<p>登录次数：18||上次登录IP：222.35.131.79.1  上次登录时间：2014-6-14 11:19:55 </p>-->
	<!--<DIV id=time>当前时间
		<p>当前时间:</p>
		<SCRIPT>document.getElementById('time').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());setInterval("document.getElementById('time').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);</SCRIPT>
	</DIV>-->
	<!--<p>当前时间:</p>
	<SCRIPT>document.getElementById('time').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());setInterval("document.getElementById('time').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);</SCRIPT>
-->
</div>
<div id="l-map"></div>
</body>
</html>
<script type="text/javascript" src="lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<script type="text/javascript">
   /* addLable('围栏名称：','fence_name');
    addLable('围栏半径：','fence_r');
    addLable('经度：','fence_coor_lng');
    addLable('纬度：','fence_coor_lat');*/

	var map = new BMap.Map("l-map");
	map.centerAndZoom(new BMap.Point(116.37231894589,39.976018510037), 14);

	map.addControl(new BMap.NavigationControl());    //地图平移缩放控件PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
	map.addControl(new BMap.OverviewMapControl());   //添加缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
	map.addControl(new BMap.ScaleControl());     //比例尺控件，默认位于地图左下方，显示地图的比例关系。
	map.addControl(new BMap.MapTypeControl());   //地图类型控件，默认位于地图右上方。
	map.addControl(new BMap.GeolocationControl());   //定位控件，针对移动端开发，默认位于地图左下方。
	map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
	map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
    var name=document.getElementById('fence_name');

    var coor_lng=document.getElementById('fence_coor_lng');
    var coor_lat=document.getElementById('fence_coor_lat');
    var r=document.getElementById('fence_r');
     var marker = new BMap.Marker();
   //coor.setValue(e.point.lng + "," + e.point.lat);
    var cicle=new BMap.Circle();
    map.addEventListener("click",function(e){
        //layer.alert('请输入围栏半径');
        map.clearOverlays();
        coor_lng.value= e.point.lng;
        coor_lat.value=e.point.lat;
        marker.setPosition(e.point);
        map.addOverlay(marker);// 将标注添加到地图中
        var cicle_r= window.prompt('请输入半径');

        cicle.setCenter(e.point) ;
        cicle.setFillColor('蓝色');
        cicle.setRadius(cicle_r);
        map.addOverlay(cicle);
        document.getElementById('fence_r').value=cicle_r;
        //alert(e.point.lng + "," + e.point.lat);
    });
   r.addEventListener("change",function(){
       map.clearOverlays();
       map.addOverlay(marker);
       cicle.setRadius(r.value);
       map.addOverlay(cicle);
   });
    // alert(name.value);
	/*$(function(){

		$.ajax(
				{
					type:'get',
					url : 'http://api.map.baidu.com/trace/v2/entity/list?ak=0EqkFfOceuwLZnVvG6dIocEiqos83G34&service_id=116118&entity_names=mycar',
					dataType : 'jsonp',
					success  : function(data) {

						var x=data.entities[0].realtime_point.location[0];
						var y=data.entities[0].realtime_point.location[1];
						var time=data.entities[0].modify_time;
						var point = new BMap.Point(x, y);

						map.centerAndZoom(point, 15);

						var marker = new BMap.Marker(point);

						map.addOverlay(marker);// 将标注添加到地图中
						var opts = {
							width : 150,     // 信息窗口宽度
							height: 50,     // 信息窗口高度
							title : "最后更新时间:", // 信息窗口标题
							anchor:"ANCHOR_UPPERRIGHT",
							offset: new BMap.Size(0, -13)

						};

						var infoWindow = new BMap.InfoWindow(time, opts);  // 创建信息窗口对象
						infoWindow.enableCloseOnClick();
						map.openInfoWindow(infoWindow, point);
						marker.addEventListener("click", function(){
							map.openInfoWindow(infoWindow,point); //开启信息窗口

						});






					},
					error : function() {
						alert('fail');
					}
				}
		);
	});*/


    function fence_add(obj,id){
       // alert(name.value);
      if(name.value!=''&& r.value!=''){
        layer.confirm('确认要添加吗？',function(index){
           // $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_stop(this,id)" href="javascript:;" title="绑定"><i class="Hui-iconfont">&#xe6e1;</i></a>');


            layer.alert('已保存电子围栏:'+document.getElementById('fence_name').value,{icon: 6,time:1000});
        });
      }
        else{
          layer.alert('添加失败，请输入围栏名称和半径',{icon: 5});

      }
    }
    function position(){
        var point =new BMap.Point(document.getElementById('fence_coor_lng').value,document.getElementById('fence_coor_lat').value);
        map.centerAndZoom(point, 14);
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);// 将标注添加到地图中
    }
    function addLable(text,frontId)
    {
        var x = document.createElement("LABEL");
        var t = document.createTextNode(text);

        x.appendChild(t);
        document.getElementById("myForm").insertBefore(x,document.getElementById(frontId));
    }

</script>
